<template>
    <div id="user">
          <div class="top">
              <div class="box-msg">
                    <!-- <router-link to="/pointExchange" tag="span" class="dh_btn">兑换 >></router-link> -->
                    <span class="dh_btn" @click="forward">兑换 >></span>
                    <div v-if="!userInfo" @click="toLogin" class="userInfo">
                        <p class="login_img_default"></p>
                        <span class="name">点击登录</span>
                    </div>
                    <div v-else  class="userInfo">
                        <p class="login_img" v-if="userInfo.avatar">
                            <router-link to="/userMsg" style="inline-block">
                                <img :src="userInfo.avatar" alt="">
                            </router-link>
                        </p>
                        <router-link to="/userMsg" style="inline-block" v-else>
                             <p class="login_img_default"></p>
                        </router-link>
                        <span class="name" v-if="userInfo.nickname">{{userInfo.nickname}}</span>
                        <span class="name" v-else>{{userInfo.username}}</span>
                    </div>
                    <div class="user-worth">
                        <div class="user-coin">
                            <p class="name">
                               <span>游币</span>
                            </p>
                            <p class="num">{{userInfo.game_coin||0}}</p>
                        </div>
                        <!-- <router-link to="/pointExchange" tag="div" class="user-point">
                             <p class="name">
                                <span>积分</span>
                            </p>
                            <p class="num">{{userInfo.game_point||0}}</p>
                        </router-link> -->
                        <div class="user-point" @click="forward">
                             <p class="name">
                                <span>积分</span>
                            </p>
                            <p class="num">{{userInfo.game_point||0}}</p>
                        </div>
                    </div>
              </div>
          </div>
          <div class="main">
              <div class="wrapper">
                  <router-link to="/userGift">
                    <div class="item">
                        <span>
                            <i class="icon_gift"></i>
                        </span>
                        <div class="msg">
                            <span>我的礼包</span>
                            <i class="icon iconfont">&#xe601;</i>
                        </div>
                    </div>
                  </router-link>
                  <router-link to="/userCollect">
                    <div class="item">
                        <span>
                            <i class="icon_collect"></i>
                        </span>
                        <div class="msg">
                            <span>我的收藏</span>
                            <i class="icon iconfont">&#xe601;</i>
                        </div>
                    </div>
                  </router-link>
               </div>
               <div class="wrapper"> 
                    <router-link to="/userMoney">
                        <div class="item">
                            <span>
                                <i class="icon_money"></i>
                            </span>
                            <div class="msg">
                                <span>我的红包</span>
                                <i class="icon iconfont">&#xe601;</i>
                            </div>
                        </div>
                    </router-link>
                    <router-link to="userGirl">
                        <div class="item">
                            <span>
                                <i class="icon_girl"></i>
                            </span>
                            <div class="msg">
                                <span>美女客服</span>
                                <i class="icon iconfont">&#xe601;</i>
                            </div>
                        </div>
                    </router-link>
               </div>
          </div>
         <router-view></router-view>
    </div>
</template>

<script>
    import { mapState,mapMutations} from 'vuex'
    import {getUserInfo} from 'api/game_box'
    import {logStatus} from 'api/login'
import { Toast } from 'vant';
    export default {
        data(){
            return{
            }
        },
        created(){
            logStatus().then(res=>{
                if(res.data.error==0){
                    let userid=this.loginInfo.userid||this.loginInfo.id;
                    if(userid){
                        getUserInfo(userid).then(res=>{
                            if(res.data.error==0){
                                res=res.data.content;
                                this.SET_LOGININFO(res);
                                this.SET_USERINFO(res);
                            }
                        })
                    }
                }else{
                    this.SET_LOGININFO("");
                    this.SET_USERINFO("");
                }
            })
        },
         computed:{
            ...mapState(['loginInfo','userInfo'])
        },
        methods:{
            toLogin(){
                 this.$router.push({
                    path: '/login',
                    query: {redirect: this.$router.currentRoute.fullPath}
                })
            },
            forward(){
                Toast({
                    message: "敬请期待！",
                    duration:1000
                })
            },
             ...mapMutations(['SET_USERINFO','SET_LOGININFO'])
        },
        components:{
            
        }
    }
</script>

<style scoped lang="scss">
@import "~styles/variable.scss";
@import "~styles/mixins.scss";
   #user{
        position: fixed;
        width: 7.5rem;
        top: 0;
        left: 50%;
        right: 0;
        bottom: 0;
        transform:translateX(-50%);
        background: #f3f5f4;
       .top{
           padding-top:0.6rem;
           width:100%;
           height:3.74rem;
           text-align: center;
           background-repeat: no-repeat;
           background-size:100% 100%;
           @include bg-image('../../assets/image/user-topImg');
           .userInfo{
               position: relative;
               top:-.7rem;
           }
           .box-msg{
               position: relative;
               margin:1rem  auto 0 auto;
               width:6.64rem;
               height:2.52rem;
               background:#fff;
               border-radius:.2rem;
               box-shadow: 0px 3px 3px 0px rgba(155, 155, 155, 0.1);
               .dh_btn{
                   display:flex;
                   align-items: center;
                   justify-content: center;
                   position: absolute;
                   top:1.4rem;
                   right:0;
                   z-index:99;
                   width:.9rem;
                   height:.3rem;
                   line-height:.3rem;
                   color:#fff;
                   font-size:.15rem;
                   @include bg-image('../../assets/image/icon_duihuan');
                   background-repeat: no-repeat;
                   background-size:100% 100%;
                   text-align: center;
               }
           }
           .login_img_default{
               width:1.4rem;
               height:1.4rem;
               margin:0 auto;
               background-size:100% 100%;
               @include bg-image('../../assets/image/icon_touxiang');
           }
            .login_img{
               width:1.4rem;
               height:1.4rem;
               margin:0 auto;
               img{
                   width:100%;
                   height:100%;
                   border-radius:50%;
               }
            }
           .name{
               line-height:0.5rem;
               text-align:center;
               color:#3e3e3e;
               font-size:$font-size-m;
           }
           .user-worth{
               position: relative;
               top:-.6rem;
               display:flex;
               .user-coin,.user-point{
                   flex:1;
                   text-align: center;
                   .num{
                       font-size:.5rem;
                       line-height:.4rem;
                       color:#343434;
                   }
                   .name{
                       margin-bottom:.06rem;
                       font-size:.24rem;
                       color:#606060;
                   }
               }
           }
       }
       .main{
           width:6.65rem;
           margin:.76rem auto 0 auto;
           .wrapper{
               border-radius:.1rem;
               overflow: hidden;
               margin-bottom:.24rem;
               box-shadow: 0px 3px 3px 0px rgba(155, 155, 155, 0.1);
               a:last-child .item{
                   span{
                       border:none;
                   }
                   .msg{
                       border:none;
                   }
               }
               .item{
                   display:flex;
                   align-items: center;
                   width:100%;
                   height:0.9rem;
                   line-height:0.9rem;
                   padding:0 0.36rem;
                   background:#fff;
                   .icon_user{
                       display:inline-block;
                       width:0.45rem;
                       height:0.45rem;
                       background-size:100% 100%;
                       @include bg-image('../../assets/image/icon_mine');
                   }
                   .icon_collect{
                       display:inline-block;
                       width:0.45rem;
                       height:0.45rem;
                       background-size:100% 100%;
                       @include bg-image('../../assets/image/icon_wdsc');
                   }
                   .icon_gift{
                       display:inline-block;
                       width:0.45rem;
                       height:0.45rem;
                       background-size:100% 100%;
                       @include bg-image('../../assets/image/icon_mygift');
                   }
                   .icon_money{
                       display:inline-block;
                       width:0.45rem;
                       height:0.45rem;
                       background-size:100% 100%;
                       @include bg-image('../../assets/image/icon_hongbao');
                   }
                   .icon_girl{
                       display:inline-block;
                       width:0.45rem;
                       height:0.45rem;
                       background-size:100% 100%;
                       @include bg-image('../../assets/image/icon_kefu');
                   }
                   .icon_msg{
                       display:inline-block;
                       width:0.45rem;
                       height:0.45rem;
                       background-size:100% 100%;
                       @include bg-image('../../assets/image/icon_message');
                   }
                   &>span{
                       display:inline-block;
                       width:0.45rem;
                       border-bottom:1px solid #f2f2f2;
                       i{
                         vertical-align: middle;
                       }
                   }
                   .msg{
                       display:flex;
                       justify-content: space-between;
                       flex:1;
                       padding-left:0.16rem;
                       border-bottom:1px solid #f2f2f2;
                       font-size:$font-size-m;
                       .icon{
                           color:#b3b3b3;
                           font-size:0.4rem;
                       }
                   }
               }
           }
       }
   }


.user-coin{
    .name{
        span{
            position:relative;
            padding-left:.4rem;
            &::before{
                content:'';
                position:absolute;
                top:0;
                left:0;
                width:.29rem;
                height:.29rem;
                @include bg-image('../../assets/image/icon_yb');
                background-size:100% 100%;
                background-repeat: no-repeat;

            }
        }
    }
}
.user-point{
    .name{
        span{
            position:relative;
            padding-left:.4rem;
            &::before{
                content:'';
                position:absolute;
                top:0;
                left:0;
                width:.29rem;
                height:.29rem;
                @include bg-image('../../assets/image/icon_jf');
                background-size:100% 100%;
                background-repeat: no-repeat;
            }
        }
    }
}
</style>